<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_样式类名操作</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.bgColor{
				width: 300px;
				height: 300px;
				background: #f00;
			}
			.borders{
				border: 10px solid #ff0;
				border-radius: 50%;
			}
		</style>
		<!-- 样式类名操作：针对css3、添加、移除、切换的元素"类名"操作
		    addClass()			有参：1个参和多个参
								语法：addClass("类名")
								<p class="类名">
								语法：addClass("类名1 类名2")
								<p class="类名1 类名2">
								功能：匹配元素集合中的所有元素
									  添加一个或者多个类名
								理解：元素添加存在的样式操作	  
			removeClass()		功能：匹配元素集合中的所有元素
									  移除一个或者多个类名操作
			toggleClass()		功能：如果元素有类名移除，没有则添加
			hasClass()			功能：检查匹配元素集合中是否包含指定类名 返回值boolen
		 -->
		  <div id="targetElement"></div>
		  <button id="addClassBtn">添加类名</button>
		  <button id="removeClassBtn">移除类名</button>
		  <button id="toggleClassBtn">切换类名</button>
		  <button id="hasClassBtn">检查类名是否存在</button>
		  <div id="resultArea"></div>
		  <script>
		//1.点击 添加类名 按钮  添加效果【样式】 300*300 背景色红色
		  $("#addClassBtn").click(function(){
			  //div添加样式-- 存在样式：类名
			  $("#targetElement").addClass("bgColor borders");
			  $("#resultArea").html("<h4>添加样式类名：bgColor</h4>")
		  });
		//2.点击 添加类名 按钮  添加效果【样式】 300*300 背景色红色 园 外层 10px黄色框
		  $("#removeClassBtn").click(function(){
			  $("#targetElement").removeClass("borders"); 
			  $("#resultArea").html("<h4>移除样式类名：bgColor</h4>")
		  });
		//3.点击 切换类名 按钮  添加效果【样式】 300*300 背景色红色 圆 外层 10px黄色框
		  $("#toggleClassBtn").click(function(){
			 $("#targetElement").toggleClass("borders"); 
			 $("#resultArea").html("<h4>切换样式类名：bgColor</h4>")
		  });
		  $("#toggleClassBtn").click(function(){
	  		 $("#targetElement").toggleClass("bgColor"); 
			 $("#resultArea").html("<h4>切换样式类名：bg Color</h4>")
		  });
		  //4.检查类名是否存在： true存在   false不存在
		  $("#hasClassBtn").click(function(){
			//div添加样式-- 存在样式：类名
		  	 var hc=$("#targetElement").hasClass("borders"); 
			 $("#resultArea").text("检查当前样式是否存在："+hc);
		  });
		  </script>
	</head>
	<body>
	</body>
</html>